<template>
  <div class="form-tool flex">
    <div class="form-tool-title flex flex-align-items-center">
      <i class="iconfont icon-shuoming1"></i>
      <span class="font-14">模板变量</span>
    </div>
    <div class="btns flex flex-wrap">
      <p v-for="(item, index) in templateList" :key="index" class="pointer font-10" @click="handleClick(item)">{{
        item.name }}</p>
    </div>
  </div>
</template>
<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['change']);

const templateList = [
  {
    name: '频道名【收件人（红人）名称】',
    value: 'channelTitle'
  },
  {
    name: '粉丝数【收件人（红人）粉丝数】',
    value: 'subscriber'
  },
  {
    name: '频道链接【（红人）频道链接】',
    value: 'link'
  }
];

const handleClick = e => {
  emit('change', e)
}
</script>

<style lang="less" scoped>
.form-tool {
  padding: 0 24px;

  .form-tool-title {
    width: 96px;
    height: 28px;
    margin-right: 16px;
    margin-bottom: 8px;

    i {
      color: @main-color;
      margin-right: 8px;
    }
  }

  .btns {
    flex: 1;
  }

  p {
    height: 28px;
    padding: 0 16px;
    border: 1px solid #dcdee0;
    border-radius: 2px;
    color: #999;
    line-height: 26px;
    transition: all .2s;
    margin-right: 16px;
    margin-bottom: 8px;

    &:hover {
      border: 1px solid @main-color;
      color: @main-color;
    }
  }
}
</style>